<template>
  <div class="kgh-container">
    <div class="section search-section">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <!-- 同首页 -->
          </div>
          <div class="col-xs-12 col-md-6">
            <div class="form-inline search-box">
              <div class="form-group search-form">
                <span class="glyphicon glyphicon-search search-icon"></span>
                <div class="search-input">
                  <input type="text" v-model="searchText">
                </div>
                <button type="button" class="search-btn" @click="fetchCurriculumList()">搜索</button>
              </div>
              <button type="button" class="btn btn-blue" @click="handleToMyVideo()">发布课程</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section classify-section sec-mrb">
      <div class="classify container">
        <div class="row">
          <div class="col-xs-12">
            分类：
            <a href="javascript:;" @click="handleCateSelect(0,'')">全部</a>
            <a href="javascript:;" v-for="item in cateList" :key="item.id" @click="handleCateSelect(1,item.id)">{{item.name}}</a>
          </div>
        </div>
        <div class="row" v-if="cateList1.length>0">
          <div class="col-xs-12">
            <div class="classify-text">
              <a href="javascript:;" v-for="item in cateList1" :key="item.id" @click="handleCateSelect(2,item.id)">{{item.name}}</a>
            </div>
          </div>
        </div>
        <div class="row classify-text" v-if="cateList2.length>0">
          <div class="col-xs-12">
            <div class="classify-text">
              <a href="javascript:;" v-for="item in cateList2" :key="item.id" @click="handleCateSelect(3,item.id)">{{item.name}}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section sec-mrb">
      <div class="container">
        <div class="row section-header">
          <div class="col-xs-12">
            <h2>推荐课程</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-3" v-for="item in hotList" :key="item.id">
            <Course-item :item="item"></Course-item>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="row section-header">
          <div class="col-xs-6">
            <!-- 分类 /classify/list 根节点传type:1   子节点传父节点ID pid:XX -->
            <!-- /curriculum/list  按照用户选择的参数 -->
            <h2>一般课程</h2>
          </div>
          <div class="col-xs-6 text-right">
            <a href="javascript:;" class="text-primary" @click="handlePriceSelect('false')">免费</a>
            <a href="javascript:;" class="text-primary" @click="handlePriceSelect('true')" style="margin-left:20px;">收费</a>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-3" v-for="item in curriculumList" :key="item.id">
            <Course-item :item="item"></Course-item>
          </div>
        </div>
        <div class="row text-center load-more" v-if="loadShow">
          <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import Cookies from 'js-cookie'
import util from '@/assets/js/utils.js'
// @ is an alias to /src
import CourseItem from '@/components/Course-Item.vue'
export default {
  name: 'course',
  components: {
    CourseItem
  },
  data() {
    return {
      hotList: [],
      curriculumList: [],
      classifyType: 1,
      searchText: '',
      cateList: [],
      cateList1: [],
      cateList2: [],
      cateLevel: 0, //0全部
      cateId: '',
      cateOneIndex: '',
      cateTwoIndex: '',
      catePrice: '',
      loadShow: true,
      pageNum: -1
    }
  },
  created() {
    this.fetchHotList()
    this.fetchClassifyList()
    this.fetchMoreData()
  },
  methods: {
    handleInitPage() {
      this.curriculumList = []
      this.loadShow = true
      this.pageNum = 0
    },
    fetchHotList() {
      let that = this
      axios
        .post(
          '/curriculum/list',
          qs.stringify({
            ctype: '',
            category: '',
            hot: 1,
            name: '',
            from: ''
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            that.hotList = response.data.data.slice(0, 4)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    fetchCurriculumList() {
      let that = this
      axios
        .post(
          '/curriculum/list',
          qs.stringify({
            price: this.catePrice,
            ctype: this.cateLevel,
            category: this.cateId,
            hot: 0,
            name: this.searchText,
            from: this.pageNum
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            if (that.searchText) {
              that.curriculumList = response.data.data
            } else {
              that.curriculumList = that.curriculumList.concat(
                response.data.data
              )
            }
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    fetchClassifyList() {
      let level = this.cateLevel
      let that = this
      axios
        .post(
          '/classify/list',
          qs.stringify({
            pid: that.cateId,
            type: level > 0 ? '' : 1
          })
        )
        .then(function(response) {
          if (response.data.suc == 200) {
            if (level == 0) {
              that.cateList = response.data.data
            } else if (level == 1) {
              that.cateList1 = response.data.data
            } else if (level == 2) {
              that.cateList2 = response.data.data
            }
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleCateSelect(level, pid) {
      this.cateLevel = level
      this.cateId = pid
      if (level == 0) {
        this.cateList1 = []
        this.cateList2 = []
      } else if (level == 1 || level == 2) {
        this.fetchClassifyList()
      }
      this.handleInitPage()
      this.fetchCurriculumList()
    },
    handlePriceSelect(bool) {
      this.catePrice = bool
      this.handleInitPage()
      this.fetchCurriculumList()
    },
    handleToMyVideo() {
      window.open('/#/my/myVideo')
    },
    fetchMoreData() {
      // 加载更多
      this.pageNum += 1
      this.fetchCurriculumList()
    }
  }
}
</script>
<style lang="scss" scoped>
.classify-section {
  background: #eee;
}
.classify {
  padding-top: 10px;
  .row {
    line-height: 30px;
    margin-bottom: 15px;
    a {
      font-size: 16px;
      margin-right: 15px;
      margin-bottom: 10px;
    }
  }
  .classify-text {
    margin-left: 45px;
    a {
      color: #b8b8b8;
    }
  }
}
</style>
